<template>
  <div class="home-recommend">
    <div class="recommend-title">
      <span>{{ pagesConfig.recommend.title }}</span>
      <span style="cursor: pointer" @click="more">更多>></span>
    </div>
    <div class="recommend-list">
      <el-row>
        <el-col
          :span="6"
          v-for="good in goodList"
          :key="good.id"
          class="recommend-col"
        >
          <router-link :to="'/goodview/' + good.id">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="baseApi + good.imgs" class="recommend-col-img" />
              <div style="padding: 5px 10px; background: var(--color-3)">
                <span class="product-name">
                  {{
                    good.name.length > 15
                      ? good.name.slice(0, 13) + "..."
                      : good.name
                  }}
                </span>
                <br />
                <span class="product-price">￥{{ good.price }}</span>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();

// Props
const props = defineProps({
  goodList: {
    type: Array,
    default: () => [],
  },
});

// Data
const baseApi = ref<string>(store.state.baseApi);
const pagesConfig = ref<any>(store.state.pagesConfig);

// Methods
const more = () => {
  router.push("/classify");
};
</script>

<style scoped lang="less">
.home-recommend {
  width: 1200px;

  .recommend-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0;

    span {
      font-size: 24px;
      font-weight: bold;
    }
  }
  .recommend-list {
    width: 100%;
    .recommend-col {
      margin: 0 10px 20px 10px;
      width: 23%;
      &:hover {
        position: relative;
        top: -2px;
      }
      .recommend-col-img {
        width: 100%;
        height: 300px;
      }
      .product-name {
        color: var(--color-5);
        font-weight: bold;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .product-price {
        color: var(--color-6);
        font-size: 15px;
      }
    }
  }
}

.good-menu {
  float: left;
  height: 370px;
  margin-right: 130px;
}
.good-menu li {
  list-style: none;
  overflow: hidden;
  margin-bottom: 35px;
}
.good-menu li a,
span {
  font-size: 20px;
  color: var(--color-1);
}
.good-menu a span:hover {
  color: #00b7ff;
}
.el-card {
  border: 1px solid var(--card-border) !important;
}
:deep(.el-card__body) {
  background: var(--card-bg) !important;
}
a {
  text-decoration: none;
  outline: none;
  color: #000;
}
</style>
